<template>
    <div class="demo">
        <h1>当前求和为{{$store.state.count}}</h1>
        <h2>求和放大十倍{{bigSum}}</h2>
        <h3>学校:{{school}}</h3>
        <h3>下方组件总人数{{personList.length}}</h3>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="add(n)">+</button>
        <button @click="jian(n)">-</button>
        <button @click="odd(n)">+</button>
        <button @click="waitadd(n)">等一等在加</button>
    </div>
</template>
<script>
    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
    export default {
        name: 'SchoolN',
        data() {
            return {
                n: 1,
                count: 0
            }
        }, props: ['title'],
        methods: {

            // 借助mapMutations生成对应方法,方法中会调用commit去联系mountation的方法(对象写法)  commit
            ...mapMutations({ add: 'JIA', jian: 'JIAN' }),


            // ...mapMutations(['JIA', 'JIAN']),
            //元素对应方法也要改成对应的方法



            //借助mapactions生成与actions对话  actions
            ...mapActions({ odd: 'odd', waitadd: 'waitadd' })
            // odd() {
            //     this.$store.dispatch('odd', this.n)

            // },
            // waitadd() {
            //     this.$store.dispatch('waitadd', this.n)
            // }
        },
        mounted() {

        },
        computed: {
            ...mapState({ school: 'school', name: 'name', personList: 'personList' }),//es6特性 ...可分为单独状态
            ...mapGetters({ bigSum: 'bigSum' }),
        }
    }
</script>

<style scoped>
    .demo {
        width: 300px;
        height: 400px;
        background-color: skyblue;

    }

    ul {
        list-style: none;
        display: block;
    }
</style>